import classNames from "classnames";
import React from "react";
import { Close } from "@ct0/icons";
import type { ReactNode } from "react";

interface TagProps {
  disabled?: boolean;
  children?: ReactNode;
  className?: string;
  onClose?: () => void;
  onClick?: () => void;
  onDoubleClick?: () => void;
}

export default function Tag({
  disabled,
  children,
  className,
  onClose,
  onClick,
  onDoubleClick,
}: TagProps) {
  const close = (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
    e.stopPropagation();
    !disabled && onClose?.();
  };
  const click = () => !disabled && onClick?.();
  const doubleClick = () => !disabled && onDoubleClick?.();
  return (
    <span
      className={classNames("ct0-tag ct0-tag-text", className)}
      onClick={click}
      onDoubleClick={doubleClick}
    >
      {children}
      {onClose && (
        <span className="ct0-tag-close" onClick={close}>
          <Close />
        </span>
      )}
    </span>
  );
}
